
import React from 'react';
import Input from '../../components/input';
import Task from '../../components/task';
import Btn from '../../components/btn';
import {useState,useEffect,useRef} from 'react';
import {connect } from 'react-redux'


//导入模块化css ***********************
import styles from './index.module.css';
//需要渲染的按钮列表*************************************************************************
const BTN = ['所有任务', '未完成任务', '已完成任务']
var allIndex=0
const  TodoList =(props)=> {
    const [stateA,setStateA] = useState({
        renderList: [],
        inputValue: '',
        list:[]
    })

    const {todoList:{renderList,inputValue,list},dispatch} = props
    // state = {
    //     renderList: [],
    //     inputValue: '',
    //     allIndex: 0
    // }
    //用来保存所有的任务*************************************************************
   const  AllList = useRef([]);
    //保存input框的value值 设置到state里*****************************************
   const  handlerClick = (event) => {
      
    // setStateA({
    //     ...stateA,
    //         inputValue: event.target.value
    //     })
    //     console.log(renderList,inputValue,list);
        dispatch({
            type:"inputChange",
            payload:{
                eventTarget: event.target.value
            }
            
        })
        console.log(inputValue);
        
    }
    //回车触发事件**********************************************************************
   const  KeyHandler = (event) => {
        if (event.keyCode === 13 && inputValue!=="") {
            //更改任务列表数据 渲染视图
            //把input输入框的value值都push进设定好的全局数组中************************************
            AllList.current.push({
                value: inputValue,
                status: false
            })
            // setStateA({
            //     ...stateA,
                
            // })

            dispatch({
                type:"enter",
                payload:{
                    renderList: getNew(),
                    inputValue: ""
                }
            })
            console.log("回车事件",renderList);
        }

    }
    //每项任务是否完成的点击事件 更改任务列表status的布尔值 ********************************************************
  const  cheageStatus = (item) => {
        // console.log(123);
        item.status = !item.status
        dispatch({
            type:"click",
            payload:{
                renderList: getNew(),
            }
        })
        console.log("点击事件",stateA);
        
    }

    //根据任务列表数据中的status值来过滤数据，生成新的数组（浅克隆）********************************************
   const getNew = () => {
        // const { allIndex } = stateA;
        console.log(AllList.current);
        if (allIndex === 0) {
            return [...AllList.current];
        }
        if (allIndex === 1) {
            return AllList.current.filter((item) => item.status === false);
        }
        if (allIndex === 2) {
            return AllList.current.filter((item) => item.status === true);
        }
        return [];
    };


    //抽离出来的单个任务jsx，并用map来遍历每一项**********************************************
  const   getListData = () => {
        return  renderList.map((item, index) => {
            return (
                <div className={styles['item']} key={index}>
                    <div className={styles['item-left']}
                        onClick={() => cheageStatus(item)}
                    >
                        {item.status && "✔️"}
                    </div>
                    <div>{item.value}</div>
                </div>
            )
        })
    }
    //任务列表的选项 接受传来的按钮下标来设置全局数据的status 然后设置getNew过滤好的数据
  const btnClick = (index) => {
      allIndex = index;
            dispatch({
                type:"click",
                payload:{
                    renderList: getNew(),
                }
            })
        
            //利用setstate里的回调函数实现二次渲染，达到同步更新数据的效果
        // console.log(allIndex,index,getNew());
    }
    console.log('render')
    //渲染所有按钮 并根据按钮的下标和全局下标来设置按钮的选中样式
   const  getBtn = () => {
        return BTN.map((item, index) =>
        (
            <div className={`${styles['btn']} ${index === allIndex ? styles['btnShow'] : ''}`} onClick={() => btnClick(index)} key={index}>{item}</div>
        )
        )
    }
    //渲染部分
    
    const data = getListData();

    const btnsList = getBtn();
return (
        (
            <div className={styles['wrap']}>
                <div className={styles['bar']} />
                <div className={styles['content-wrap']}>
                    <Input value={inputValue} clickhandler={handlerClick} keyH={KeyHandler} />
                    <Btn ss={btnsList}/>
                    <Task data={data}/>
                </div>
            </div>
        ))
    
}

export default connect(e=>e)(TodoList)